<!--添加分类 -->

{{ extend '../blog_set_suibi.html'}}

{{block 'blog_set_layout_css'}}
    <link rel="stylesheet" href="../../css/blog_set/sb/blog_set_suibi_type_add.css">
    <script>
       $(() =>{

            const maxLen = 60
            const titleNode = $('#type-title')
            const contentNode = $('#type-content')
            const numNode = $('#type-num')
            contentNode.attr('maxlength', maxLen)
            numNode.html(maxLen)

            $('#add').on('click', () =>{
                const type = titleNode.val()
                const typeDesc = contentNode.val()
                if(type === ''){
                    return alert('请输入标题')
                }

                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:3003/addtype',
                    dataType: 'json',
                    data:{
                        type,
                        typeDesc
                    },
                    success(res){
                        //此时 跳转到 所有分类
                        console.log(res)
                    }
                })
            })

            $('#refuse').on('click', () =>{
                titleNode.val('')
                contentNode.val('')
            })

            //监听textarea的文本输入修改剩余字数
            contentNode.on('input', (ev) =>{

                let value = ev.target.value
                let len = value.length
                if(len >= maxLen){
                    len = maxLen
                    ev.target.value = value.substr(0, maxLen)
                    numNode.css('color', 'red')
                }
                
                numNode.html(maxLen - len)
            })
       })
    </script>
{{/block}}

<!-- 右边的内容区域 -->
{{block 'blog_set_layout_content'}}
<div class="content">
    <div class="title">
        <p>添加分类</p>
    </div>
    <div class="type-title">
        <input type="text" id="type-title" placeholder="请输入您的标题">
    </div>
    <div class="type-content">
        <textarea id="type-content" placeholder="分类描述"></textarea>
        <p>剩余 <span id="type-num"></span> 个字</p>
    </div>
    <div class="type-btn">
        <span id="add">添加</span>
        <span id="refuse">取消</span>
    </div>
    <div>
        <!-- 这里可以转为 具体日期 -->
        {{1567566854939 | dateFormat}}
    </div>
</div>
{{/block}}
                       